<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js - Background CSS</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #c {
            width: 100%;
            height: 100%;
            display: block;
            background: url(https://threejs.org/manual/examples/resources/images/daikanyama.jpg) no-repeat center center;
            background-size: cover;
        }

        #content {
            position: absolute;
            padding: 5px;
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
    <div id="content">
        <a href="https://threejs.org/manual/#zh/post-processing">后期处理</a>
    </div>
    <canvas id="c"></canvas>


    <script type="importmap">
        {
            "imports": {
              "three": "../three.js-r151/build/three.module.js",
              "three/addons/": "../three.js-r151/examples/jsm/"
            }
          }
    </script>

    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
</body>

<script type="module">
    // Three.js - Background CSS
    // from https://threejs.org/manual/examples/background-css.html

    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    function main() {
        const canvas = document.querySelector('#c');
        const renderer = new THREE.WebGLRenderer({
            canvas,
            alpha: true,
            antialias: true
        });

        const fov = 75;
        const aspect = 2;  // the canvas default
        const near = 0.1;
        const far = 5;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.z = 2;

        new OrbitControls(camera, canvas);

        const scene = new THREE.Scene();

        {
            const color = 0xFFFFFF;
            const intensity = 1;
            const light = new THREE.DirectionalLight(color, intensity);
            light.position.set(-1, 2, 4);
            scene.add(light);
        }

        const boxWidth = 1;
        const boxHeight = 1;
        const boxDepth = 1;
        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

        function makeInstance(geometry, color, x) {
            const material = new THREE.MeshPhongMaterial({ color });
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);
            cube.position.x = x;
            return cube;
        }

        const cubes = [
            makeInstance(geometry, 0x44aa88, 0),
            makeInstance(geometry, 0x8844aa, -2),
            makeInstance(geometry, 0xaa8844, 2),
        ];

        const loader = new THREE.TextureLoader();
        const bgTexture = loader.load('https://threejs.org/manual/examples/resources/images/daikanyama.jpg');
        scene.background = bgTexture;

        function resizeRendererToDisplaySize(renderer) {
            const canvas = renderer.domElement;
            const width = canvas.clientWidth;
            const height = canvas.clientHeight;
            const needResize = canvas.width !== width || canvas.height !== height;
            if (needResize) {
                renderer.setSize(width, height, false);
            }
            return needResize;
        }

        function render(time) {
            time *= 0.001;

            if (resizeRendererToDisplaySize(renderer)) {
                const canvas = renderer.domElement;
                camera.aspect = canvas.clientWidth / canvas.clientHeight;
                camera.updateProjectionMatrix();
            }

            // Set the repeat and offset properties of the background texture
            // to keep the image's aspect correct.
            // Note the image may not have loaded yet.
            const canvasAspect = canvas.clientWidth / canvas.clientHeight;
            const imageAspect = bgTexture.image ? bgTexture.image.width / bgTexture.image.height : 1;
            const aspect = imageAspect / canvasAspect;

            bgTexture.offset.x = aspect > 1 ? (1 - 1 / aspect) / 2 : 0;
            bgTexture.repeat.x = aspect > 1 ? 1 / aspect : 1;

            bgTexture.offset.y = aspect > 1 ? 0 : (1 - aspect) / 2;
            bgTexture.repeat.y = aspect > 1 ? 1 : aspect;

            cubes.forEach((cube, ndx) => {
                const speed = 1 + ndx * .1;
                const rot = time * speed;
                cube.rotation.x = rot;
                cube.rotation.y = rot;
            });

            renderer.render(scene, camera);

            requestAnimationFrame(render);
        }

        requestAnimationFrame(render);
    }


    main();

</script>

</html>